<template>
    <div id="app" class="cart">
        <div class="cart-goods-list">
            <mt-cell-swipe v-if="requestDone" v-for="(cartItem, index) in cartItems" :key="index" class="cart-item-wrap" :right="[{content: '&nbsp;删&nbsp;&nbsp;除&nbsp;',style: { background: 'red', color: '#fff' }, handler: () => deleteHandler(cartItem.id) }]">
                <div class="cart-item">
                    <div class="select-wrap">
                        <label>
                            <span class="mint-checkbox">
                                <input type="checkbox" class="mint-checkbox-input" :disabled="!cartItem.isValid" v-model="cartItem.checked">
                                <span class="mint-checkbox-core small"></span>
                            </span>
                        </label>
                    </div>
                    <div class="cart-product-image">
                        <span v-if="!cartItem.isValid" class="icon-invalid"></span>
                        <img class="product-image" @click="goToProductDetail(cartItem)" :src="cartItem.image">
                    </div>
                    <div class="cart-product-desc">
                        <div class="cart-product-desc-item product-name">{{ cartItem.name }}</div>
                        <div class="cart-product-desc-item">
                            <span>{{ showSpec(cartItem) }}</span>
                        </div>
                    </div>
                    <div class="cart-product-action">
                        <div class="price">
                            <span class="dp-price">¥{{cartItem.dpPrice}}</span>
                            <span class="sc-price" v-if="cartItem.scPrice && cartItem.dpPrice != cartItem.scPrice">¥{{cartItem.scPrice}}</span>
                        </div>
                        <div class="action-btn-group">
                            <span @click="desNum(cartItem)">-</span><span class="cart-item-count">{{cartItem.number}}</span><span @click="addNum(cartItem)">+</span>
                        </div>
                    </div>
                </div>
            </mt-cell-swipe>
            <div v-if="requestDone&&!cartItems.length" class="no-goods-cart">
                <span class="icon-cart big-cart-icon"></span>
                <div class="no-goods-tip">
                    <div>您的购物车饿瘪了！</div>
                </div>
                <div class="goto-pickgoods" @click="goToProductPage">
                    逛一逛
                </div>
            </div>
        </div>
        <div class="cart-overview" v-if="cartItems.length">
            <div class="select-all">
                <label>
                    <span class="mint-checkbox">
                        <input type="checkbox"  @change="selectedAll" class="mint-checkbox-input" v-model="cartModel.allSelected">
                        <span class="mint-checkbox-core small"></span>
                    </span>
                    <span style="margin-left: 10px;">全选</span>
                </label>
            </div>
            <div class="cart-amount" :class='[cartModel.totalNum?"active":""]'>
                <span class="cart-amount-tip">共计</span>
                <span class="cart-amount-num">¥{{cartModel.totalPrice}}</span>
            </div>
            <div class="cart-buy-button" :class='[cartModel.totalNum?"active":""]' @click="goToCheckOrderPage">结算({{cartModel.totalNum}})</div>
        </div>
        <tabs-bar :activeTab="2"></tabs-bar>
    </div>
</template>

<script>
import utils from '@utils'
import { list, del, mod } from './api'
import { CellSwipe } from 'mint-ui'

export default {
    name: 'app',
    components: {
        mtCellSwipe: CellSwipe
    },
    mixins: [ utils.MixinBase ],
    data() {
        return {
            cartItems: [],
            requestDone: false
        }
    },
    mounted() {
        this.$indicator.open({
            spinnerType: 'fading-circle',
            text: '加载中...'
        });
        this.wechatInit().then(()=> {
            this.init();
            this.wechatConfigInit().then(()=> {
                var shareOptions = {
                    shareTitle: "坚冰商务",
                    shareDesc: "亲！还在等什么，快来看看！",
                    shareUrl: utils.createAuthLink("index.html"),
                    sharePic: ''
                }

                utils.shareHandler({
                    type: 'timeLine',
                    ...shareOptions
                })

                utils.shareHandler({
                    type: 'appMessage',
                    ...shareOptions
                })
            })
        }, ()=> {
            this.init();
        });
    },
    computed: {
        cartModel() {
            var allSelected = true;
            var temp = {
                totalNum: 0,
                totalPrice: 0
            };

            for(var i=0;i<this.cartItems.length;i++) {
                if(this.cartItems[i].checked) {
                    temp.totalNum+=this.cartItems[i].number;
                    temp.totalPrice+=this.cartItems[i].number*this.cartItems[i].dpPrice;
                } else {
                    allSelected = false
                }
            }

            if(this.cartItems.length) {
                temp.allSelected = allSelected;
            } else {
                temp.allSelected = false;
            }

            temp.totalPrice = temp.totalPrice.toFixed(2);
            return temp;
        }
    },
    methods: {
        showSpec(cartItem) {
            return (cartItem.specs || []).map(item => item.specItemName).concat(
                (cartItem.attributes || []).map(item => item.attributeItemName),
                (cartItem.addons || []).map(item => item.addonItemName)
            ).join(",")
        },
        init() {
            this.requestDone = false;
            list().then(data => {
                this.cartItems = (data||[]).map((item)=> {
                    if(item.isValid) {
                        item.checked = true;
                    }
                    return item;
                });
                this.$indicator.close();
                this.requestDone = true;
            }).catch(() => {
                this.$indicator.close();
            })
        },
        deleteHandler(id) {
            this.$messagebox({
                title: '删除商品',
                message: '确定删除该商品？',
                cancelButtonText: '取消',
                confirmButtonText: '确定',
                showCancelButton: true
            }).then((res)=> {
                if(res === "confirm") {
                    del({id: id}).then(() => {
                        for(var i=0;i<this.cartItems.length;i++) {
                            if(this.cartItems[i].id == id) {
                                this.cartItems.splice(i, 1);
                            }
                        }
                    })
                }
            })
        },
        selectedAll() {
            if(this.cartModel.allSelected) {
                this.cartItems.map((item)=> {
                    if(item.isValid) {
                        item.checked = true;
                    }
                })
            } else {
                this.cartItems.map((item)=> {
                    item.checked = false;
                })
            }
        },
        addNum(cartItem) {
            cartItem.number++;
            mod({id: cartItem.id, number: cartItem.number}).then(()=> {
            },() => {
                cartItem.number--;
            })
        },
        desNum(cartItem) {
            if(cartItem.number>1) {
                cartItem.number--;
                mod({id: cartItem.id, number: cartItem.number}).then(()=> {
                },() => {
                    cartItem.number++;
                })
            } else {
                this.deleteHandler(cartItem.id)
            }
        },
        goToProductDetail(cartItem) {
            utils.goToPage("product_detail.html?id="+cartItem.productId);
        },
        goToCheckOrderPage() {
            if(this.cartModel.totalNum>0&&this.cartModel.totalPrice>0) {
                utils.goToPage("check_order.html?cartIds="+ this.cartItems.filter(item =>item.checked).map(item => item.id).join(","));
            }
        },
        goToProductPage() {
            utils.goToPage("product.html");
        }
    }
}
</script>
<style>
#app.cart {
    padding-bottom: 90px;
}
.cart-goods-list .cart-item-wrap:first-child .mint-cell-wrapper{
    background: none
}
.cart-overview {
    height: 40px;
    display: flex;
    width: 100%;
    position: fixed;
    bottom: 48px;
    line-height: 40px;
    background: rgb(255,255,255);
    border-top: 1px solid #efefef;
    align-items: center;
}
.cart-amount {
    color: rgba(51, 51, 51, .5);
    flex: 1;
    text-align: center;
    padding-right: 10px;
    text-align: right;
    display: flex;
}
.cart-amount.active {
    color: rgba(51, 51, 51, 1);
}
.cart-amount.active .cart-amount-num {
    color: #fe0000;
}

.cart-amount-tip {
    font-size: 14px;
    font-weight: bold;
    flex: 1;
}
.cart-buy-button {
    font-size: 14px;
    color: #fff;
    background: rgba(254, 0, 0, 0.5);
    width: 80px;
    height: 30px;
    border-radius: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-right: 10px;
}
.cart-buy-button.active {
    background: rgba(254, 0, 0, 1);
}

.cart-item {
    height: 64px;
    padding: 8px 0;
    width: 310px;
    display: flex;
    position: relative;
}
.cart-item .cart-product-image {
    height: 64px;
    width: 64px;
    margin-left: 8px;
    position: relative;
}
.cart-item .cart-product-image .product-image {
    width: 100%;
    height: 100%;
}

.cart-item .cart-product-image .icon-invalid {
    position: absolute;
}

.cart-item .cart-product-image .icon-invalid::before {
    font-size: 36px;
    color: red;
}
.cart-product-desc {
    flex: 1;
    padding-left: 10px;
    color: #222;
}
.cart-product-action {
    width: 80px;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    color: #222;
}
.cart-product-desc-item {
    line-height: 18px;
    color: #666;
    font-size: 12px;
    margin-top: 4px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
}
.cart-product-desc-item.product-name {
    font-size: 13px;
    color: #333;
}
.cart-product-action {
    line-height: 18px;
}
.cart-product-action .num {
    color: #fe0000;
}
.cart-product-action .price {
    color: #fe0000;
    width: 90%;
    text-align: right;
}

.cart-item-wrap .mint-cell-swipe-button {
    display: flex;
    justify-content: center;
    align-items: center;
}
.select-wrap {
    display: flex;
    justify-content: center;
    align-items: center;
}
.aa {
    width: 90%;
    height: 26px;
    line-height: 26px;
}
.cart-product-action .action-btn-group {
    display: flex;
    width: 90%;
    box-sizing: border-box;
    margin-top: 10px;
}
.cart-product-action .action-btn-group span {
    flex: 1;
    justify-content: center;
    align-items: center;
    display: flex;
    font-size: 14px;
}
.cart-product-action .action-btn-group span.cart-item-count {
    margin: 0 2px;
    color: #fe0000;
}
.select-all {
    padding: 0 10px;
}
.cart-product-action .action-btn-group span.action-disabled {
    color: #c8c9cc;
}
.cart-product-action .action-btn-group span:first-child,.cart-product-action .action-btn-group span.cart-item-count, .cart-product-action .action-btn-group span:last-child {
    background: #f7f7f7;
    padding: 2px 4px;
}
.no-goods-tip {
    color: #666;
    margin-bottom: 6px;
}
.big-cart-icon {
    font-size: 30px;
    background: #efefef;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 10px auto;
    color: #666;
}
.no-goods-cart {
    text-align: center;
    margin-top: 40px;
}
.sc-price {
    margin-left: 4px;
    text-decoration: line-through;
    color: #666;
    font-size: 10px;
}
</style>
